<template>
	<!-- <SafeArea> -->
	<view class="h-full">
		<!-- 搜索栏 -->
		<view class="w-full h-[7vh]"
			><nut-searchbar
				v-model="searchParam"
				@change="search"
				placeholder="请输入油类名称"
				shape="square"
				><template #rightin> <Search2 /> </template></nut-searchbar
		></view>
		<MyElevator
			v-show="initOilList && initOilList.length > 0"
			:index-list="initOilList"
			height="80vh"
		>
			<template #default="{ item }">
				<nut-checkbox
					:model-value="checkedArr.includes(item.name)"
					@update:model-value="(val) => updateChecked(item.name, val)"
					icon-size="22"
					style="width: 100%; padding-left: 0; padding-right: 50rpx"
					text-position="left"
					:label="item.name"
				>
					<view>
						<view
							><text class="mr-2">{{ item.name }}</text
							><text class="text-gray-500/50">{{
								item.alias
							}}</text>
						</view>
						<view
							style="
								font-size: 20rpx;
								color: #ffca28;
								font-weight: 600;
							"
							><text class="mr-4">皂化价：{{ item.zhj }}</text
							><text>INS： {{ item.ins }}</text>
						</view>
					</view>
				</nut-checkbox>
			</template>
		</MyElevator>
		<!-- 按钮 -->
		<view
			style="
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				height: 130rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				padding: 3vw 4vw;
			"
		>
			<view
				class="h-full w-[49%] easy_center bg-[#f7f8fa] mr-[2vw] rounded-md"
				@tap="clearData"
				>清空</view
			><view
				class="h-full w-[49%] easy_center bg-[#6066ea] text-[#fff] rounded-md"
				@tap="confirm"
				>确定</view
			>
		</view>
	</view>
	<!-- </SafeArea> -->
</template>
<script setup lang="ts">
import { debounce } from 'lodash';
import MyElevator from '@/components/elevator.vue';
import { getOilList } from '@/services/api';
import { data } from './data';
import Taro, { eventCenter } from '@tarojs/taro';
import { Search2 } from '@nutui/icons-vue-taro';
import { SafeArea } from '@/components/SafeArea/index';
import { ref, computed, onMounted, nextTick } from 'vue';

// 定义类型
interface OilItem {
	name: string;
	zhj: number;
	ins: number;
	alias: string;
}

interface OilGroup {
	title: string;
	list: OilItem[];
}

// 初始化数据
const initOilList = ref<OilGroup[]>(data);
const searchParam = ref('');
const checkedArr = ref<string[]>([]);

// 组件加载时获取油品列表数据
// onMounted(() => {
// 	getList({ 'name.contains': '' });
// });

// 优化搜索逻辑，减少计算次数
const search = debounce(() => {
	if (!searchParam.value) {
		initOilList.value = data;
		return;
	}

	initOilList.value = data.reduce<OilGroup[]>((acc, group) => {
		const filteredList = group.list.filter((item) =>
			item.name.includes(searchParam.value)
		);
		if (filteredList.length > 0) {
			acc.push({
				title: group.title,
				list: filteredList,
			});
		}
		return acc;
	}, []);
}, 300);

// const getList = (name: any) => {
// getOilList(name).then((res) => {
//     initOilList.value = Object.keys(res).map((key) => {
//         return {
//             title: key,
//             list: res[key],
//         };
//     });
// });
// initOilList.value = data;
// console.log(initOilList.value, 'initOilList');
// };

// const search = () => {
//     // console.log(val, 'val');
//     getList({ 'name.contains': searchParam.value });
// };

// 优化勾选处理
const updateChecked = (name: string, checked: boolean) => {
	const newCheckedArr = [...checkedArr.value];
	if (checked) {
		if (!newCheckedArr.includes(name)) {
			newCheckedArr.push(name);
		}
	} else {
		const index = newCheckedArr.indexOf(name);
		if (index > -1) {
			newCheckedArr.splice(index, 1);
		}
	}
	checkedArr.value = newCheckedArr;
};

const confirm = () => {
	// 至少要勾选一条数据
	if (checkedArr.value.length === 0) {
		Taro.showToast({
			title: '请勾选油品',
			icon: 'none',
		});
		return;
	}
	const oilList = flatData.value.filter((v) =>
		checkedArr.value.includes(v.name)
	);
	// console.log(checkedArr.value, 'checkedArr');
	// 把data中的list平铺到一个数组中,取出和checkedArr.value中相同的数据
	eventCenter.trigger('addOil', oilList);
	Taro.navigateBack();
};

const clearData = () => {
	checkedArr.value = [];
};

const flatData = computed(() => {
	return initOilList.value
		.map((v) => v.list)
		.flat()
		.map((v, index) => ({
			...v,
			id: index + 1,
		}));
});
</script>
<style lang="scss" scoped>
.nut-elevator__list__item__code {
	font-size: 24px;
}
</style>
